<template>
  <div class="page-container">
    <!-- 温馨提示 -->
    <div class="warm-prompt">
      <div class="warm-prompt-title">温馨提示</div>
      <ul>
        <li>流程指引：总管理员先新增角色并分配权限，再授予账号该角色；</li>
        <li>只有总管理员可新增、编辑、删除角色，以及给角色分配权限；</li>
        <li>其他账号仅能查看本人所属角色及权限；</li>
      </ul>
    </div>
    <!-- 表格 -->
    <div class="admin-tableDiv">
      <div class="admin-btn">
        <wf-el-auth-button auth-key="WALFARE-GLYQX-XZJS" type="primary" @click="roleschangeFun(1)">
          新增角色
        </wf-el-auth-button>
      </div>
      <el-table :data="tableData.records" stripe style="width: 100%" class="adminTable">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="200"></el-table-column>
        <el-table-column prop="mobiles" label="账号" width="400"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="icon-line">
              <wf-el-auth-button
                type="text"
                :need-auth="false"
                @click="checkOrEditFun(scope.row, true)"
              >
                查看权限
              </wf-el-auth-button>
              <wf-el-auth-button
                auth-key="WALFARE-GLYQX-SQZH"
                type="text"
                @click="accountExecFun(scope.row)"
              >
                授权账号
              </wf-el-auth-button>
              <wf-el-auth-button
                v-show="scope.row.systemCreated == 0"
                auth-key="WALFARE-GLYQX-BJJS"
                type="text"
                @click="roleschangeFun(2, scope.row)"
              >
                编辑角色
              </wf-el-auth-button>
              <wf-el-auth-button
                type="text"
                auth-key="WALFARE-GLYQX-FPQX"
                @click="checkOrEditFun(scope.row)"
              >
                分配权限
              </wf-el-auth-button>
              <el-button
                v-if="scope.row.systemCreated == 0"
                type="text"
                @click="deleteFun(scope.row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑or新增 -->
    <el-dialog
      :title="roleTitle"
      :visible.sync="roleChangeVisible"
      width="30%"
      :before-close="roleChangeClose"
    >
      <div class="admin-editHtml">
        <span>角色名称</span>
        <el-input
          v-model="addRoleName"
          maxlength="20"
          show-word-limit
          placeholder="请输入角色名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleChangeVisible = false">取 消</el-button>
        <el-button type="primary" @click="rolesConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 去认证 -->
    <el-dialog title="提示" :visible.sync="goAuthenticationVisible" width="30%">
      <div class="admin-editHtml">
        <span>您的企业未通过认证，目前无法添加角色</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeRouter()">去认证</el-button>
        <el-button type="primary" @click="goAuthenticationVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配or查看权限-->

    <DistributOrCheckPermissions
      ref="DistributOrCheckPermissions"
      @refresh="refresh"
    ></DistributOrCheckPermissions>
    <!-- 授权账号 -->
    <el-drawer
      title="授权账号"
      :visible.sync="authorizedAccountShow"
      :with-header="false"
      :wrapper-closable="false"
      size="530px"
      style="border-top-left-radius: 10px"
    >
      <AuthorizedAccount :row="rowObj" @changeShow="changeShow"></AuthorizedAccount>
    </el-drawer>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import {
    getList,
    rolesAdd,
    rolesUpdate,
    rolesManage,
    findCompanyInfoAuthenticationById,
  } from '@/api/administrator';
  import DistributOrCheckPermissions from './components/DistributOrCheckPermissions.vue'; //分配权限
  import AuthorizedAccount from './components/AuthorizedAccount.vue'; //授权账号
  export default {
    components: {
      DistributOrCheckPermissions,
      AuthorizedAccount,
    },
    data() {
      return {
        goAuthenticationVisible: false,
        tableData: [],
        roleTitle: '编辑',
        editRoleId: '', //编辑的角色id
        roleChangeVisible: false, //编辑0r新增
        addRoleName: '', //添加的角色
        rowRoleId: '', //查看权限id
        rowObj: {},
        permissionsShow: false, //查看权限
        distributionShow: false, //分配权限
        authorizedAccountShow: false, //授权账号
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organId() {
        return this.userInfo.organId;
      },
    },
    activated() {
      this.getListFun();
    },

    mounted() {
      // this.getListFun();
    },
    methods: {
      refresh() {
        this.getListFun();
      },
      // 授权子组件关闭父组件的值
      changeShow() {
        this.authorizedAccountShow = false;
        this.getListFun();
      },
      // 关闭查看权限
      closeShow() {
        this.permissionsShow = false;
      },
      //跳转到去认证页面
      changeRouter() {
        this.roleChangeVisible = false;
        this.goAuthenticationVisible = false;
        this.$router.push('/organization/index');
      },
      // 获取列表数据
      getListFun() {
        let that = this;
        getList({ pageNumber: 1, pageSize: 50, authGroupList: [417] }).then(res => {
          that.tableData = res.data;
        });
      },
      // 打开角色弹框
      roleschangeFun(type, scope) {
        this.roleChangeVisible = true;
        if (type == 1) {
          this.roleTitle = '新增';
          this.addRoleName = '';
        } else {
          this.roleTitle = '编辑';
          this.addRoleName = scope.roleName;
          this.editRoleId = scope.id;
        }
      },
      // 新增or编辑---确定
      rolesConfirm() {
        if (this.roleTitle == '新增') {
          let orgId = this.organId;
          findCompanyInfoAuthenticationById(orgId).then(res => {
            if (res.data) {
              this.rolesAddFun();
            } else {
              this.goAuthenticationVisible = true;
            }
          });
        } else {
          this.rolesUpdateFun();
        }
        this.getListFun();
      },

      // 新增角色
      rolesAddFun() {
        let that = this;
        let objData = { roleName: this.addRoleName, authGroup: 417 };
        rolesAdd(objData).then(res => {
          if (res.status == 200) {
            that.$message.success('角色已添加');
            that.roleChangeVisible = false;
            this.getListFun();
          }
        });
      },
      // 编辑角色
      rolesUpdateFun() {
        let that = this;
        let objData = { id: this.editRoleId, roleName: this.addRoleName, authGroup: 417 };
        rolesUpdate(objData).then(res => {
          if (res.status == 200) {
            that.$message.success('角色已修改成功');
            this.getListFun();
          }
          that.roleChangeVisible = false;
        });
      },

      // 编辑权限
      checkOrEditFun(row, isSee) {
        this.$refs.DistributOrCheckPermissions.init(row.id, isSee);
      },

      // 删除
      deleteFun(row) {
        let that = this;
        this.$confirm(
          '确定删除该角色吗？如果该角色有员工存在，需要先移除 该角色下的员工，再删除该角色！',
          '提示',
          {
            confirmButtonText: '确定',
            showCancelButton: false,
            showClose: false,
          }
        ).then(() => {
          let loginNames = row.loginNames;
          if (!loginNames) {
            let objData = { deleted: 1, id: row.id };
            rolesManage(objData).then(res => {
              if ((res.status = 200)) {
                that.getListFun();
                that.$message({
                  type: 'success',
                  message: '删除成功!',
                });
              }
            });
          } else {
            this.$message.error('需要先移除该角色下的所有员工后，才能删除');
          }
        });
      },

      // 角色变化
      roleChangeFun(num) {
        if (num == 1) {
          this.roleTitle = '编辑';
        } else {
          this.roleTitle = '删除';
        }
        this.roleChangeVisible = true;
      },
      // 角色变化弹框关闭
      roleChangeClose() {
        this.roleChangeVisible = false;
      },

      // 授权账号
      accountExecFun(row) {
        this.authorizedAccountShow = true;
        this.rowRoleId = row.id;
        this.rowObj = row;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .warm-prompt {
    background: #fff;
    border-radius: 7px;
    padding: 16px;
    .warm-prompt-title {
      font-size: 16px;
      font-weight: 800;
    }
    ul {
      padding: 0;
      margin-left: 16px;
      font-size: 14px;
      color: #7f848b;
      line-height: 28px;
    }
  }
  .admin-tableDiv {
    margin-top: 16px;
    border-radius: 7px;
    background: #fff;
    padding: 14px;
    .admin-btn {
      cursor: pointer;
      .add-role {
        display: block;
        text-align: center;
        width: 95px;
        height: 37px;
        line-height: 37px;
        border-radius: 7px;
        background: #3771e9;
        color: #fff;
      }
    }

    .adminTable {
      font-size: 14px;
      color: #7f848b;
      border-top: 1px solid #ebeef5;
      margin-top: 16px;
      max-height: calc(100vh - 300px);
      overflow-y: auto;
    }
  }
  .aa-elPagination {
    padding: 19px 0;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
  }
  .icon-line {
    display: flex;
    align-items: center;
    span {
      display: block;
      font-size: 14px;
      color: #353739;
      display: flex;
      align-items: center;
      margin-right: 18px;
    }
    span::before {
      content: '';
      display: block;
      width: 23px;
      height: 23px;
      margin-right: 1px;
    }
  }
  .check-btn {
    cursor: pointer;
  }
  .check-btn::before {
    background: url(../../assets/img/check.png) no-repeat;
    background-size: 23px 23px;
  }
  .admin-editHtml {
    display: flex;
    align-items: center;
    padding: 20px;
    span {
      color: #7f848b;
      font-size: 14px;
    }
    .el-input {
      width: 278px;
      margin-left: 15px;
    }
  }
</style>
